<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>重定向</title>
    <!--引入Vue库-->
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <p>
        <router-link to="/home">主页</router-link>
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-link to="/*">不存在的链接</router-link>
      </p>
      <router-view></router-view>
    </div>
    <script>
      const Home = { template: "<div>打开网站主页</div>" };
      const Login = { template: "<div>打开登录页面</div>" };
      const Register = { template: "<div>打开注册页面</div>" };
      const NotFound = { template: "<div>网页没有找到</div>" };
      const routes = [
        { path: "/home", component: Home },
        { path: "/login", component: Login },
        { path: "/register", component: Register },
        { path: "*", redirect: "/home" },
      ];
      const router = new VueRouter({
        routes,
      });
      const vm = new Vue({
        el: "#app",
        router,
      });
    </script>
  </body>
</html>
